import React,{useEffect,useState} from 'react'
import {useParams} from 'react-router-dom';
import http from 'axios'
import "./MovieDetail.scss"

// react router6 不支持 class组件,所以改用 函数式组件
/*class MovieDetail extends React.Component{
    constructor(props){
        super(props)
    }

    componentDidMount(){
        console.log(this.props)
    }

    getMovieInfo(id){

    }

    render(){
        return (
            <div className="detail">
                详情
            </div>
        )
    }
}
*/

function MovieDetail(){
    //获取路由的参数对象，可以取url中的参数,如 http://localhost:3000/movie_detail/1491249
    const params = useParams(); 
    const [filmInfo,setFilmInfo]= useState({});

    // 根据电影id获取电影详情
    // 想在组件挂载完成，获取数据，方式1：定义获取函数，放外面，然后在useEffect中调用
    // const getDetail = async ()=>{
    //     let url = `https://m.maoyan.com/ajax/detailmovie?movieId=`+params.film_id;
    //     let ret = await http.get(url);

    //     console.log(ret,ret.data,ret.data.detailMovie)
    //     setFilmInfo(ret?.data?.detailMovie) //保存电影信息
    // }
    
    useEffect(
        ()=>{
            // 当组件挂载完成的时候，我们获取电影id
            // console.log(params)

            // 想在组件挂载完成，获取数据，方式2：定义获取函数，然后在useEffect中调用
            // 注意，useEffect的回调函数不能用async修饰
            
            // 根据电影id获取电影详情
            const getDetail = async ()=>{
                let url = `https://m.maoyan.com/ajax/detailmovie?movieId=`+params.film_id;
                let ret = await http.get(url);

                console.log(ret,ret.data,ret.data.detailMovie)
                setFilmInfo(ret?.data?.detailMovie) //保存电影信息
            }
            getDetail();
            // console.log("666",params)
        },
        []
    )

    return (
        <div className="detail">
           <img src={filmInfo.img} /> 
           <h1>{filmInfo.nm}</h1>
           <h2>类型：{filmInfo.cat}</h2>
           <p>导演：{filmInfo.dir}</p>
           <p>简介：{filmInfo.dra}</p>
        </div>
    )
}
export default MovieDetail;